<template>
    <el-container>
        
        <el-header style="margin-bottom: 100px;">
            <div>
                <el-input v-model="InputMsg" placeholder="请输入服务IP"></el-input>
                <el-button @click="Send()">切换日志服务器</el-button>
            </div>
            
        </el-header>
        <el-main>
            <div>
                <el-carousel :interval="10000"  type="card" height="200px">
                    <el-carousel-item v-for="item,index in MasterList" :key="index">
                        <el-card shadow="hover" style="margin-top: 3px; text-align: center;" @click="chageip">
                            <H1>系统信息</H1>
                            <div>
                                <div><span class="span" style="margin-right: 20px;">IP</span>{{item.ip}}</div>
                                <div><span class="span" style="margin-right: 20px;">Thrift端口</span>{{item.port}}</div>
                                <div><span class="span" style="margin-right: 20px;">内存</span>{{item.memory}}</div>
                                <div><span class="span" style="margin-right: 20px;">可用内存</span>{{item.free}}</div>
                                <div><span class="span" style="margin-right: 20px;">CPU</span>{{item.cpu}}</div>
                                <div><span class="span" style="margin-right: 20px;">ThriftServer版本号</span>{{item.version}}</div>
                                <div><span class="span" style="margin-right: 20px;">任务</span>{{item.jobs}}</div>
                            </div>
                        </el-card>
                    </el-carousel-item>
                </el-carousel>

            </div>
            <el-card shadow="hover" style="margin-top: 10px;">
                <H1>日志</H1> 
                <div id = "ms"></div>
            </el-card>


            <!-- <el-row :gutter="12">
                <div v-for="index,item in MasterList">
                <el-col :span="8">
                    <el-card shadow="hover" style="margin-top: 10px;">
                        <H1>系统信息</H1>
                        
                        <div>
                            <div><span>IP</span> {{index.ip}}</div>
                            <div><span>Thrift端口</span>{{index.port}}</div>
                            <div><span>内存</span>{{index.memory}}</div>
                            <div><span>可用内存</span>{{index.free}}</div>
                            <div><span>CPU</span>{{index.cpu}}</div>
                            <div><span>版本号</span>{{index.version}}</div>
                            <div><span>任务</span>{{index.jobs}}</div>
                        </div>
                        <H1>日志</H1>
                        <div id = "ms"></div>
                    </el-card>
                </el-col>
                </div>
            </el-row> -->
        </el-main>
    </el-container>
</template>

<script>
import { masters } from '../../api/autopay';
export default {
    name: 'ApiDetail',
    data(){
        return { 
            MasterList: [],
            SocketSuc:false,
            InputMsg:"",
            SckErrshow : false,
            stop:false,
            timer:null,
            settimer:null,
            // socket: new WebSocket('ws://' + window.location.host + '/v1/websockit/get')
        }
    },
    mounted:function () {

        this.Test()
        // this.loopMaster()
        this.loopSet()
        
    },//mounted
    destroyed: function() {
    　　　　//页面销毁时关闭长连接
        this.stop = true
        this.websocketclose()
    },
    methods: {
        loopMaster(){
            var that = this;
            that.timer = setInterval(that.GetMaster, 5000)
            
        },
        loopSet(){
            var _this = this;
            _this.settimer = setInterval(this.Send,1000); //定时发送日志请求
            
        },
        LogClear(){

        },
        chageip(){
            console.log("cdddd");
        },
        appendLog(item) {
            var doScroll = this.LogMsg.scrollTop > this.LogMsg.scrollHeight - this.LogMsg.clientHeight - 1;
            this.LogMsg.appendChild(item);
            if (doScroll) {
                this.LogMsg.scrollTop = this.LogMsg.scrollHeight - this.LogMsg.clientHeight;
            }
        },
        Test(){
            this.socket = new WebSocket('ws://' + window.location.host + '/v1/websockit/get');
            // this.socket = new WebSocket('ws://192.168.248.168:8000/v1/websockit/get');
            // 监听socket连接
            this.socket.onopen = this.open
            // 监听socket错误信息
            this.socket.onerror = this.error
            // 监听socket消息
            // this.socket.send = this.send
            
            this.socket.onmessage = this.getMessage

            this.socket.onclose = this.websocketclose;
            this.LogMsg =  document.getElementById("ms")

        },
        open: function () {
            this.SocketSuc = true;
            console.log("socket连接成功")
            this.Send();
            this.$notify({
                title: 'socket连接成功',
                message: 'socket连接成功'
            });

        },
        error: function () {
            this.$notify({
                title: 'socket异常',
                message: '连接错误',
                type: 'warning'
            });
        },
        getMessage: function (msg) {
            // document.getElementById('ms').innerText = msg.data

            var item = document.createElement("div");
            item.innerText = msg.data;
            this.appendLog(item);

        },
        Send() {
            if (this.stop ==true) {
                console.log("停止定时器");
                clearInterval(this.settimer);
            }
            var that = this;
            if (that.SocketSuc){
                that.socket.send(that.InputMsg);
                // var item = document.createElement("div");
                // item.innerText = "发送 "+that.InputMsg;
                // that.appendLog(item);
            }else{
                if (!that.SckErrshow ){
                    this.$notify({
                        title: 'socket异常',
                        message: 'socket未连接',
                        type: 'warning'
                    });
                    that.SckErrshow = true;
                }
                
            }
        },
        close: function () {
            this.SocketSuc = false;
            this.$notify({
                title: 'socket异常',
                message: 'socket已经关闭',
                type: 'warning'
            });
        },
        cache(){
          console.log('Cache Cleared');
        },
        alert(){
          alert('Clicked on alert icon');
        },
        websocketclose(e){  //关闭
            this.SocketSuc = false;
            var item = document.createElement("div");
            item.innerHTML = "<b>Connection closed.</b>";
            this.appendLog(item);
            this.$notify.error({
                title: 'socket异常',
                message: 'socket断开连接',
            });
        },
        GetMaster(){
            
            var that = this;
            if  (that.stop ==true){
                clearInterval(that.timer )
                console.log("停止定时器");
                return 
            }
            masters().then(res => {
                let {code,msg,data} = res;
                if (code == 200){
                    that.MasterList = data;
                    for (var i = that.MasterList.length - 1; i >= 0; i--) {
                        // this.send(that.MasterList[i].ip)
                    }
                }else{
                }
            }).catch(
                function(error) {
                    that.$message.error("获取Master接口请求失败:\n"+error);
            })   
        },
    }
}
</script>

<style >
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    /*background: gray;*/
}

#ms {
    /*background: white;*/
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    /*position: absolute;*/
    /*max-width: 1000px;*/
    max-height: 500px;
    min-height: 300px;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
.span{
    font-weight: 800;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

</style>
